$space: 6px;
$size: 6px;
$primary: #409eff;

.block-resize {
  position: absolute;
  top: -$space;
  left: -$space;
  right: -$space;
  bottom: -$space;
  width: $size;
  height: $size;
  background-color: $primary;
  z-index: 99;
  user-select: none;

  &.block-resize-top {
    left: calc(50% - #{$size / 2});
    right: initial; // 设置css属性为默认值
    bottom: initial;
    cursor: n-resize; // 上侧拉伸
  }
  &.block-resize-bottom {
    left: calc(50% - #{$size / 2});
    right: initial;
    top: initial;
    cursor: s-resize; // 下侧拉伸
  }
  &.block-resize-left {
    top: calc(50% - #{$size / 2});
    right: initial;
    bottom: initial;
    cursor: w-resize; // 左侧 拉伸
  }
  &.block-resize-right {
    top: calc(50% - #{$size / 2});
    left: initial;
    bottom: initial;
    cursor: e-resize; // 右侧 拉伸
  }

  &.block-resize-top-left {
    right: initial;
    bottom: initial;
    cursor: nw-resize; //左上图标
  }
  &.block-resize-top-right {
    left: initial;
    bottom: initial;
    cursor: ne-resize; //右上拉个图标
  }
  &.block-resize-bottom-left {
    top: initial;
    right: initial;
    cursor: sw-resize; // 左下拉伸图标
  }
  &.block-resize-bottom-right {
    top: initial;
    left: initial;
    cursor: se-resize; // 右下拉个图标
  }
}
